<template>
    <div class="menu-box">
        <div class="left">
            <p>
                <el-link type="primary" @click="clickNoticeFun">
                    <strong style="display:flex;align-items:center">
                        <span>星球角色列表</span>&nbsp;<el-icon size="15"><QuestionFilled color="gray" /></el-icon>
                    </strong>
                </el-link>
            </p>
            <el-result
                v-if="roleList.length == 0"
                icon="warning"
                title="温馨提示"
                sub-title="暂无角色信息，请维护角色 ~ ~ ~"
            >
                <template #extra>
                    <el-button type="primary">回到首页</el-button>
                </template>
            </el-result>          
            <el-radio-group v-model="selectRole">
                <el-radio v-for="(item,index) in roleList" :key="index" :label="item.roleId" border style="margin-top:10px" @change="getMenusByRole(item.roleId)">
                    {{item.roleName}}
                </el-radio>
            </el-radio-group> 
        </div>
        <el-divider direction="vertical" style="width:5px; height: 600px"/>
        <div class="right">
            <p>
                <el-link type="primary" @click="clickNoticeFun">
                    <strong style="display:flex;align-items:center">
                        <span>星球菜单列表</span>&nbsp;<el-icon size="15"><QuestionFilled color="gray" /></el-icon>
                    </strong>
                </el-link>
            </p>
            <div class="tree-box">
                <el-result
                    v-if="treeDataList.length == 0"
                    icon="warning"
                    title="温馨提示"
                    sub-title="当前角色暂无分配菜单信息,请点击刷新按钮开始分配吧 ~ ~ ~"
                >
                    <template #extra>
                        <el-button type="primary">回到首页</el-button>
                    </template>
                </el-result>  
                <el-tree v-if="treeDataList.length !== 0" ref="selectDataTree" :data="treeDataList" :props="propsRef" show-checkbox 
                    default-expand-all
                    node-key="menuId"
                    highlight-current
                    :default-checked-keys="defaultExpandIds"

                />
                <div class="btn">   
                    <el-button type="success" @click="getCheckedKeys">
                        确认添加
                        <el-icon size="16" class="el-icon--right"><Edit /></el-icon>
                    </el-button>
                    <el-button type="warning" @click="resetChecked">
                        取消重置
                        <el-icon size="16" class="el-icon--right"><Delete /></el-icon>
                    </el-button>
                    <el-button type="danger" @click="flushPage">
                        刷新页面
                        <el-icon size="16" class="el-icon--right"><Bell /></el-icon>
                    </el-button>
                </div>  
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { $http } from '@/utils/axios'
import { gatewayPrefix, userMiddleContextPath} from '@/utils/commConstance'
import { ElMessage, ElNotification } from 'element-plus'
const props = defineProps({
    isMenu: {
        type: Boolean,
        default: false
    }
})

watch(()=>props.isMenu,(newVal,oldVal)=>{
    if(newVal){
        // getRoleList()
        // getAllMenus()
    }
},{immediate:true,deep:true})

const selectRole = ref('')
const roleList=ref([])
// 默认选中子菜单集合(已存在子菜单)
let defaultExpandIds=ref([])
//选择的菜单
const selectDataTree=ref()
const propsRef = {
    label: 'menuName',
    children: 'childMenus'
}
// 数据
const treeDataList = ref([])
onMounted(()=>{
    getRoleList()
    getAllMenus()
})
// 获取角色
const getRoleList = ()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getRoleList?isAll=false`).then(res=>{
        roleList.value = res
        if(roleList.value.length > 0){
            selectRole.value = roleList.value[0].roleId
            getMenusByRole(roleList.value[0].roleId)
        }
    })
}
// 获取所有菜单
const getAllMenus=()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getAllMenus`).then(res=>{
        treeDataList.value=res
    })
}
// 获取角色已有菜单
const getMenusByRole = (roleId)=>{
    selectRole.value = roleId
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/getMenuInfoByRoleId/${roleId}`).then(res=>{
        getAllMenus()
        defaultExpandIds.value = res.menuIds
        if(defaultExpandIds.value.length === 0){
            //ElMessage.warning('当前角色暂无菜单信息,请分配!!!')
        }
    })
}
// 说明
const clickNoticeFun=()=>{
    ElNotification({
        title: '权限分配说明',
        dangerouslyUseHTMLString: true,
        message: '<p>1、选择账号信息，再选择要分配的角色信息，点击分配即可!!!</p> \
                <p style="margin-top:10px">2、选择角色信息后，再选择上对应菜单信息，点击添加菜单即可,注:每次只能选一个角色分配菜单!!!</p> \
                <p style="margin-top:10px">3、账号勾选上选择的角色信息后，之前存在的角色如果没选中，则默认删除该角色，即每次选择角色后，\
                    对于不存在账号不存在的角色会添加，对于存在的角色如果勾选了则不变，如果没勾选则删除!!!</p> \
                <p>4、每个账号在注册时会自动分配一种角色，所以每个账号至少应该有一种角色!!!</p> ',
        type: 'success',
    })
}
// 刷新
const flushPage = ()=>{
    getRoleList()
    getAllMenus()
}
// 获取选择角色的菜单信息
const getMenuInfoByRoleId = ()=>{
    if(selectRole === null || selectRole === undefined || selectRole.length === 0){
        return ElMessage.warning('请选择一个角色分配菜单!!!')
    }
    if(selectRole.length != 1){
        return ElMessage.warning('只能选择一个角色分配菜单!!!')
    }
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/setRoleForUser/${selectAccount.value}/${selectRole.value}`).then(res=>{
        if(res){
            ElMessage.success('分配成功')
        }else{
            ElMessage.error('分配失败')
        }
    })
}
// 确认 分配菜单获取节点数据两种方式通过node或key,本次使用key
const getCheckedKeys = () => {
    let selectedKeys = selectDataTree.value.getCheckedKeys(false)
    console.log('keys==>',selectedKeys)
    console.log('角色===>',selectRole.value);
    if(selectRole.value === null || selectRole.value === undefined || selectRole.value.length === 0){
        return ElMessage.warning('请选择一个角色分配菜单!!!')
    }
    if(selectedKeys === null || selectedKeys === undefined || selectedKeys.length === 0){
        return ElMessage.warning('请至少选择一个菜单分配!!!')
    }
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/distributeMenuForRole?roleId=${selectRole.value}&menuIds=${selectedKeys}`).then(res=>{
        if(res){
            ElMessage.success('分配成功')
        }else{
            ElMessage.error('分配失败')
        }
    })

}
const getCheckedNodes = () => {
    console.log('nodes==>',selectDataTree.value.getCheckedNodes(false, false))
}

const resetChecked = () => {
    selectDataTree.value.setCheckedKeys(defaultExpandIds.value, false)
}

</script>

<style lang="less" scoped>
.menu-box{
     display: flex;
    .left{
        width: 45%;
        height: 100%;
    }
    .right{
        width: 55%;
        height: 100%;
        .tree-box{
            .el-tree{
                width: 100%;
                height: 550px;
                overflow-y: scroll;
            }
            .btn{
                text-align: center;
                margin-top: 20px;
            }
        }
    }

}

</style>